<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单向数据流</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
    <div id="app_data">

        <my-comp parent-message="afd" parent-size="ADF"></my-comp>


    </div>




    <script>
        Vue.component('my-comp',{
            //像父组件显示表明希望得到的数据
            props:['parentMessage','parentSize'],
            //将父组件中的数据定义为子组件的局部变量，（如果是对象和数组，在子组件的修改会影响父组件）
            data: function () {
                return{
                    childMessage:this.parentMessage.toUpperCase()
                }
            },
            computed:{
                childSize:function () {
                    return this.parentSize.toLowerCase() ;
                }
            },
            //模板内必须唯一指定根元素
            template:'<span>1:{{childMessage}}<div>2:{{childSize}}</div></div></span>'


        })
        var app_data = new Vue({
            el:"#app_data",
            data:{

            }
        })


    </script>



</body>
</html>